<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分销客户统计看板</title>
    <link rel="stylesheet" href="https://unpkg.com/ant-design-vue@3.2.20/dist/antd.min.css">
    <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.prod.js"></script>
    <script src="https://unpkg.com/ant-design-vue@3.2.20/dist/antd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f0f2f5;
            margin: 0;
            padding: 0;
            color: rgba(0, 0, 0, 0.85);
        }
        .main-container {
            padding: 24px;
            background-color: #f0f2f5;
        }
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
            background: #fff;
            padding: 16px 24px;
            border-radius: 8px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(83, 64, 64, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
        }
        .page-title {
            font-size: 20px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
            margin: 0;
        }
        .header-actions {
            display: flex;
            gap: 12px;
        }
        .stats-container {
            background: #fff;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-bottom: 24px;
        }
        .stats-card {
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
            position: relative;
        }
        .stats-card-blue {
            background-color: #f0f7ff;
            border: 1px solid #91d5ff;
        }
        .stats-card-purple {
            background-color: #f9f0ff;
            border: 1px solid #d3adf7;
        }
        .stats-card-red {
            background-color: #fff2f0;
            border: 1px solid #ffccc7;
        }
        .stats-card-pink {
            background-color: #fff0f6;
            border: 1px solid #ffadd2;
        }
        .stats-card-title {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
            margin-bottom: 12px;
        }
        .stats-card-value {
            font-size: 30px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .stats-card-footer {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.45);
        }
        .chart-card {
            grid-column: span 2;
            border-radius: 8px;
            padding: 24px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
            border: 1px solid #f0f0f0;
        }
        .chart-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 20px;
            color: rgba(0, 0, 0, 0.85);
        }
        .chart-container {
            height: 300px;
        }
        .filter-bar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 24px;
        }
        .card-actions {
            position: absolute;
            top: 16px;
            right: 16px;
        }
        @media (max-width: 1200px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .chart-card {
                grid-column: span 2;
            }
        }
        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            .chart-card {
                grid-column: span 1;
            }
            .header-actions {
                flex-wrap: wrap;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="main-container">
            <div class="page-header">
                <h1 class="page-title">分销客户统计看板</h1>
                <div class="header-actions">
                    <a-button type="primary" icon="plus">添加图表</a-button>
                    <a-button icon="filter">筛选</a-button>
                    <a-button icon="bg-colors">主题</a-button>
                    <a-button icon="bar-chart">AI分析</a-button>
                    <a-button icon="notification">定时推送</a-button>
                    <a-button icon="fullscreen">全屏</a-button>
                </div>
            </div>

            <div class="stats-container">
                <div class="filter-bar">
                    <a-range-picker />
                    <a-button type="primary">查询</a-button>
                </div>

                <div class="stats-grid">
                    <!-- 1. 在合作客户数统计 -->
                    <div class="stats-card stats-card-blue">
                        <div class="card-actions">
                            <a-button type="link" icon="bar-chart" size="small"></a-button>
                        </div>
                        <div class="stats-card-title">在合作客户数统计</div>
                        <div class="stats-card-value">{{ stats.cooperatingCustomers }}</div>
                        <div class="stats-card-footer">在合作客户</div>
                    </div>

                    <!-- 2. 跟进总客户统计 -->
                    <div class="stats-card stats-card-purple">
                        <div class="card-actions">
                            <a-button type="link" icon="bar-chart" size="small"></a-button>
                        </div>
                        <div class="stats-card-title">跟进总客户统计</div>
                        <div class="stats-card-value">{{ stats.totalFollowUpCustomers }}</div>
                        <div class="stats-card-footer">跟进总客户</div>
                    </div>

                    <!-- 3. 停止合作客户统计 -->
                    <div class="stats-card stats-card-red">
                        <div class="card-actions">
                            <a-button type="link" icon="bar-chart" size="small"></a-button>
                        </div>
                        <div class="stats-card-title">停止合作客户统计</div>
                        <div class="stats-card-value">{{ stats.terminatedCustomers }}</div>
                        <div class="stats-card-footer">停止合作客户</div>
                    </div>

                    <!-- 4. 成交总金额 -->
                    <div class="stats-card stats-card-pink">
                        <div class="card-actions">
                            <a-button type="link" icon="bar-chart" size="small"></a-button>
                        </div>
                        <div class="stats-card-title">成交总金额</div>
                        <div class="stats-card-value">¥{{ stats.totalAmount }}</div>
                        <div class="stats-card-footer">成交总金额</div>
                    </div>

                    <!-- 5. 本周成交金额 -->
                    <div class="stats-card stats-card-blue">
                        <div class="card-actions">
                            <a-button type="link" icon="bar-chart" size="small"></a-button>
                        </div>
                        <div class="stats-card-title">本周成交金额</div>
                        <div class="stats-card-value">¥{{ stats.weeklyAmount }}</div>
                        <div class="stats-card-footer">本周成交金额</div>
                    </div>

                    <!-- 6. 本周新增客户数 -->
                    <div class="stats-card stats-card-red">
                        <div class="card-actions">
                            <a-button type="link" icon="bar-chart" size="small"></a-button>
                        </div>
                        <div class="stats-card-title">本周新增客户数</div>
                        <div class="stats-card-value">{{ stats.weeklyNewCustomers }}</div>
                        <div class="stats-card-footer">本周新增客户数</div>
                    </div>

                    <!-- 7. 本周新签合同 -->
                    <div class="stats-card stats-card-blue">
                        <div class="card-actions">
                            <a-button type="link" icon="bar-chart" size="small"></a-button>
                        </div>
                        <div class="stats-card-title">本周新签合同</div>
                        <div class="stats-card-value">{{ stats.weeklyNewContracts }}</div>
                        <div class="stats-card-footer">本周新签合同</div>
                    </div>

                    <!-- 8. 本周新签合同金额 -->
                    <div class="stats-card stats-card-blue">
                        <div class="card-actions">
                            <a-button type="link" icon="bar-chart" size="small"></a-button>
                        </div>
                        <div class="stats-card-title">本周新签合同金额</div>
                        <div class="stats-card-value">¥{{ stats.weeklyContractAmount }}</div>
                        <div class="stats-card-footer">本周新签合同金额</div>
                    </div>

                    <!-- 9. 近一个月总销售趋势图 -->
                    <div class="chart-card">
                        <div class="chart-title">近一个月总销售趋势图</div>
                        <div class="chart-container" ref="salesChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue;
        const { Button, DatePicker } = antd;

        const app = createApp({
            setup() {
                const stats = ref({
                    cooperatingCustomers: 0,
                    totalFollowUpCustomers: 0,
                    terminatedCustomers: 0,
                    totalAmount: 0,
                    weeklyAmount: 0,
                    weeklyNewCustomers: 0,
                    weeklyNewContracts: 0,
                    weeklyContractAmount: 0
                });

                const salesChart = ref(null);
                let chartInstance = null;

                // 模拟从API获取数据
                const fetchData = async () => {
                    // 实际项目中这里应该是API调用
                    // const response = await fetch('/api/distribution-stats');
                    // const data = await response.json();
                    // stats.value = data;
                    
                    // 模拟数据
                    setTimeout(() => {
                        stats.value = {
                            cooperatingCustomers: 42,
                            totalFollowUpCustomers: 78,
                            terminatedCustomers: 15,
                            totalAmount: 325600,
                            weeklyAmount: 85600,
                            weeklyNewCustomers: 12,
                            weeklyNewContracts: 8,
                            weeklyContractAmount: 125400
                        };
                        initChart();
                    }, 500);
                };

                const initChart = () => {
                    if (!salesChart.value) return;
                    
                    chartInstance = echarts.init(salesChart.value);
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            formatter: '{b}<br/>{a}: {c}万元'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['9/1', '9/5', '9/10', '9/15', '9/20', '9/25', '9/30']
                        },
                        yAxis: {
                            type: 'value',
                            name: '万元'
                        },
                        series: [{
                            name: '销售额',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 8,
                            lineStyle: {
                                width: 3,
                                color: '#1890ff'
                            },
                            itemStyle: {
                                color: '#1890ff'
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgba(24, 144, 255, 0.4)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(24, 144, 255, 0.1)'
                                    }]
                                }
                            },
                            data: [12.5, 15.3, 18.6, 22.4, 26.8, 30.2, 32.5]
                        }]
                    };
                    chartInstance.setOption(option);
                };

                onMounted(() => {
                    fetchData();
                    window.addEventListener('resize', () => {
                        if (chartInstance) chartInstance.resize();
                    });
                });

                return {
                    stats,
                    salesChart
                };
            }
        });

        app.use(antd);
        app.mount('#app');
    </script>
</body>
</html>